<template>
  <div class="roleDrawer-container">
    <el-drawer
      :visible="deptVisible"
      :title="title"
      @close="handleClose"
      width="50%"
    >
      <el-form
        ref="roleInfoForm"
        :model="Form"
        :rules="rule"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="Form.roleName" placeholder="请输入角色名称"/>
        </el-form-item>
        <el-form-item label="角色标识" prop="roleId">
          <el-input v-model="Form.roleId" placeholder="请输入角色标识"/>
        </el-form-item>
        <el-form-item label="角色状态" >
          <el-switch v-model="Form.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
        </el-form-item>
        <el-form-item label="角色描述" prop="describe">
          <el-input v-model="Form.describe" placeholder="请输入角色描述"/>
        </el-form-item>
        <el-form-item label="菜单权限">
          <el-tree
            :data="menuData"
            show-checkbox
            node-key="id"
            :props="defaultProps"
          />
        </el-form-item>
      </el-form>
      <div class="drawer-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {menuData} from '@/mock/jsModule/system'

export default {
  name: 'roleDrawer',
  props:{
    title:{
      type: String,
      default: '角色信息',
    },
    dialogVisible:{
      type: Boolean,
      default: false,
    },
    rowInfo:{
      type: Object,
      default: () =>{}
    }
  },
  data(){
    return{
      deptVisible: false,
      Form: {
        roleId: null,
        roleName: null,
        status: false,
        describe: null,
      },
      rule:{
        roleId: [{ required: true, message: '请选择角色标识', trigger: 'change' }],
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
      },
      defaultProps: {
        children: 'children',
        label: 'menuName',
      },
    }
  },
  watch:{
    dialogVisible:{
      deep: true,
      handler(val){
        this.deptVisible = val
      }
    },
    rowInfo:{
      deep: true,
      handler(val){
        if(val.roleName){
          Object.keys(val).forEach(key =>{
            this.Form[key] = val[key]
          })
        }
      },
    }
  },
  computed:{
    menuData(){
      return menuData
    },
  },
  methods:{
    handleChange(){

    },
    resetForm(){
      Object.keys(this.Form).forEach(key =>{
        if(key == 'status'){
          this.Form[key] = false
        }else{
          this.Form[key] = null
        }
      })
    },
    handleClose() {
      this.$emit('update:dialogVisible',false)
      this.$refs['roleInfoForm'].resetFields()
      this.resetForm()
    },
    handleSubmit () {
      this.$refs['roleInfoForm'].validate((valid) =>{
        if(valid){
          if(this.title.indexOf('新增') > -1){
            this.$emit('closeDialog', false)
            // 编写具体的新增代码
            this.$message.success('新增成功')
          }else{
            this.$emit('closeDialog', false)
            // 编写具体的编辑代码
            this.$message.success('编辑成功')
          }
          this.$refs['roleInfoForm'].resetFields()
          this.resetForm()
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.roleDrawer-container{
  text-align: left;
}
.drawer-footer{
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>
<style lang="scss">
.el-cascader-menu__wrap{
  margin-right: -5px !important;
}
</style>
